<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules">
                    <a-row >
                        <a-col :span="24">
                            <a-form-model-item :label="i18n('form.ds','数据源')" prop="dataSource" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <a-select style="width: 240px;" v-model="mdl.dataSource" :options="dataSources"  :getPopupContainer="(p)=>p.parentNode" allowClear ></a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-model-item label="SQL" prop="sql" :label-col="labelCol1" :wrapper-col="wrapperCol1">
                                <rx-monaco-editor
                                    ref="sql"
                                    v-model="mdl.sql"
                                    language="sql"
                                    style="height: 300px;"
                                >
                                    <!--插槽 名称为monacoeditor -->
                                    <template v-slot:monacoeditor>
                                        <a-dropdown>
                                            <a-button @click="executeSql(mdl.sql)" style="margin-left: 8px">{{i18n('list.execute','执行')}}</a-button>
                                        </a-dropdown>
                                    </template>
                                </rx-monaco-editor>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.conField','条件字段')" prop="whereField" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select style="width: 240px;" v-model="mdl.whereField" :options="fields"
                                          :getPopupContainer="(p)=>p.parentNode" allowClear ></a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="i18n('form.renderField','渲染字段')" prop="renderingField" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select style="width: 240px;" v-model="mdl.renderingField" :options="fields"
                                          :getPopupContainer="(p)=>p.parentNode" allowClear ></a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row>

                    </a-row>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {Util, RxMonacoEditor, Dialog, BaseForm} from "@lowcode/jpaas-common-lib";
import ChartDataModelApi from "@/api/form/core/chartDataModel";

export default {
    name: "SqlSetting",
    mixins: [BaseForm],
    props: {
        fieldSetting:{
            type:Object
        },
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
    },
    components: {
        Dialog,
        RxMonacoEditor
    },
    data() {
        return {
            labelCol1: {span: 3},
            wrapperCol1: {span: 19},
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
            rules: {},
            mdl:{
                dataSource:"",
                sql:"",
                whereField:"",
                renderingField:""
            },
            fields:[],
            dataSources:[]
        }
    },
    created() {
        if(this.fieldSetting.sqlSetting){
            this.mdl=this.fieldSetting.sqlSetting;
        }
        if(this.mdl.sql){
            this.getFields(this.mdl.sql);
        }
        this.getDataSources();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        onOk(){
            Util.closeWindow(this, "ok",this.mdl);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        },
        //获取字段
        getFields(sql){
            if(sql){
                this.fields=[];
                ChartDataModelApi.getFields({sql: sql, ds: this.mdl.dataSource}).then(res => {
                    if(res){
                        for (var i = 0; i < res.length; i++) {
                            this.fields.push({
                                value:res[i].fieldName,
                                label:res[i].fieldLabel
                            })
                        }
                    }
                });
            }
        },
        //获取数据源
        getDataSources(){
            ChartDataModelApi.getAllByAppName().then(res=>{
                if(res){
                    this.dataSources=[];
                    for (var i = 0; i < res.length; i++) {
                        this.dataSources.push({
                            label:res[i].name,
                            value:res[i].alias
                        })
                    }
                }
            });
        },
        executeSql(sql){
            this.getFields(sql);
        }
    }
}
</script>

<style scoped>

</style>